<template>
  <div>
    <!-- 轮播 -->
    <lunbo />
    <div class="wode">猜您喜欢</div>
    <div>
      <ul>
        <li v-for="(v, i) in hemasx" :key="i" @click="fun()">
          <img :src="v.imgUrl" alt="" />
          <h4>{{ v.title }}</h4>
          <p>{{ v.cont }}</p>
          <p>
            <span class="big">{{ v.price }}</span
            >/箱
            <span class="small">{{ v.yuanjia }}</span>
            <span class="tubiao">
              <van-icon name="cart-circle" color="#08affe" size="25"
            /></span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import lunbo from "@/components/life/shouye/lunbo.vue";
import data from "@/mock/data.js";
export default {
  components: {
    lunbo,
  },
  data() {
    return {
      hemasx: data,
    };
  },
  methods: {
    fun() {
      // 调用自定义事件进行子组件的数据抛出
      // this.$emit("自定义事件名",你要传递的数据)
      this.$emit("xiaoming", this.hemasx);
    },
  },
};
</script>

<style lang="less" scoped>
div {
  background-color: #f3f3f3;
}
.wode {
  width: 90%;
  height: 0.16rem;
  line-height: 0.16rem;
  margin: 0.125rem auto;
  font-size: 0.15rem;
  padding-left: 0.125rem;
  font-weight: bold;
  border-left: 0.0467rem solid #0053a7;
}
ul {
  width: 95%;
  margin: 0.125rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  width: 48%;
  border: 0.01125rem solid #eae9e9;
  background-color: #fff;
  border-radius: 0.1125rem;
  font-size: 0.067rem;
  margin-bottom: 0.125rem;
  padding-bottom: 0.125rem;
}
img {
  width: 100%;
  border-radius: 0.1125rem 0.1125rem 0rem 0rem;
}
h4 {
  height: 0.4rem;
  line-height: 0.2rem;
  overflow: hidden;
  font-size: 0.1rem;
  margin-left: 0.05rem;
  color: #333;
}
p {
  height: 0.3rem;
  line-height: 0.3rem;
  overflow: hidden;
  font-size: 0.067rem;
  margin-left: 0.05rem;
  color: rgb(145, 145, 145);
}
.big {
  font-size: 0.167rem;
  color: #f5110e;
}
.small {
  color: rgb(145, 145, 145);
  text-decoration: line-through;
}
.tubiao {
  margin-left: 0.255rem;
}
</style>